<template>
  <div id="container">
    <router-view></router-view>

    <!-- 导航菜单 -->
    <nav
      class="nav123"
      :style="`top:${top}px`"
      
    >
      <div class="nav-box">
        <div class="btn-toggle" 
        @click="isShow = !isShow" 
        @touchstart="start"
        @touchmove="move"
        @touchend="touchEnd">
          <i class="bi bi-toggles2"></i>
        </div>
        <div class="menu">
          <div
            :style="`transform: translateX(${isShow == true ? '0' : '280'}px)`"
          >
            <a href="#/home">
              <span class="iconfont icon-zhuye"></span>
            </a>
            <a href="#/classify">
              <span class="iconfont icon-fenlei"></span>
            </a>
            <a href="#/cart">
              <span class="iconfont icon-gouwuchekong"></span>
            </a>
            <a href="#/personal">
              <span class="iconfont icon-wode"></span>
            </a>
          </div>
        </div>
      </div>
    </nav>
  </div>
</template>
<style lang="less">
@import "./assets/css/reset.css";
@import "./assets/font/bootstrap-icons.css";
@import "./assets/font/font_icon/iconfont.css";
@import './assets/less/variable';
#container {
  width: 100%;
  max-width: 750px;
  min-width: 300px;
  margin: 0 auto;
}

.nav123 {
  position: fixed;
  right: 10px;
  bottom: 100px;
  z-index: 1002;
  .nav-box {
    width: 180px;
    height: 40px;
    position: relative;
    padding-right: 50px;
    overflow: hidden;
    .btn-toggle {
      width: 40px;
      height: 40px;
      background-color: @bgColor4;
      text-align: center;
      line-height: 40px;
      font-size: 20px;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 1000;
      color: #fff;
      border-radius: 4px;
    }
    .menu {
      width: 100%;
      height: 40px;
      div {
        width: 100%;
        height: 40px;
        display: flex;
        transform: translateX(200px);
        border-radius: 4px;
        // background-color: #ccc;
        transition: all 0.2s linear;
        // transition: all .5s cubic-bezier(.21,1.93,.92,1.1);
        // transition: all .2s cubic-bezier(.21,1.93,.78,1.58);
        a {
          width: 50px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          margin: 0 3px;
          background-color: @bgColor4;
          border-radius: 50%;
          font-size: 22px;
          .iconfont {
            color: #fff;
          }
        }
      }
    }
  }
}
</style>

<script>
export default {
  data() {
    return {
      isShow: false,
      top : 400,
      startY: 0,
      moveY: 0,
      resY : 400,
    };
  },
  methods: {
    start(event) {
      this.startY = event.touches[0].pageY;
      // console.log(this.top,this.resY)
      // console.log(window.innerHeight);
      // console.log(document.querySelector('.tt-header-box').clientHeight);
      // console.log(document.querySelector('.tt-footer').clientHeight);
    },
    move(event) {
      event.preventDefault(); 
      this.moveY = event.touches[0].pageY;
      this.top = this.moveY - this.startY + this.resY;
      // console.log(document.querySelector('.tt-footer').clientHeight)
      this.top = this.top >= (document.querySelector('.tt-header-box').clientHeight) ? this.top  : (document.querySelector('.tt-header-box').clientHeight);
      this.top = this.top <= (window.innerHeight - document.querySelector('.tt-footer').clientHeight - document.querySelector('.btn-toggle').clientHeight) ? this.top  : (window.innerHeight - document.querySelector('.tt-footer').clientHeight - document.querySelector('.btn-toggle').clientHeight);
    },
    touchEnd() {
      this.resY = this.top;
    },
  },
};
</script>